import React from 'react';     //引入React
import '../css/InputList.css'   //引入css文件
import { PENDDING } from './config'  //引入未经定义的魔法值
class InputList extends React.Component {
    //定义组件的初始化状态
    constructor(props) {
        super(props)
    }

    //渲染函数
    render() {
        return (
            <div>
                <div className="header">
                    <h2>ToDoList</h2>
                    <input
                        className="input1"
                        ref="todoinput"
                        onKeyDown={(event) => {
                            //获取输入框value
                            if (event.keyCode == 13) {
                                var value = this.refs.todoinput.value;
                                
                                console.log(22);
                                //容错判断
                                if (value.length === 0) {
                                    alert('输入框不能为空');
                                    return
                                }

                                //组装todo 对象
                                var todo = {
                                    content: value,
                                    status: PENDDING //未经定义的魔法值
                                }
                                this.props.addTodo(todo)
                                // this.setState({
                                //     todos: this.state.todos
                                // })
                            }
                        }}
                    />
                </div>
                <div></div>
            </div>
        )
    }
}
export default InputList